<template>
	<section style="width:100%">
		<section>

			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<div class="agent-path">
					<p>当前代理:</p>
					<h3 @click="goAgent">admin></h3>
					<h3>123123123</h3>
				</div>
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-input v-model="filters.name" placeholder="代理ID"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="filters.name" placeholder="代理名字"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="filters.name" placeholder="联系方式"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="getUsers">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="handleAdd">新增</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true">
					<el-form-item label="一级代理总收益">
						<label>213212999999</label>
					</el-form-item>
					<el-form-item label="一级代理分销收益">
						<label>213212999999</label>
					</el-form-item>
					<el-form-item label="一级代理团队收益">
						<label>12123121231</label>
					</el-form-item>
					<el-form-item label="一级会员总人数">
						<label>54351321</label>
					</el-form-item>
					<el-form-item label="一级代理数量">
						<label>2312121321</label>
					</el-form-item>
					<el-form-item label="二级代理数量">
						<label>0.99999</label>
					</el-form-item>
					<el-form-item label="三级代理数量">
						<label>454545</label>
					</el-form-item>
					<el-form-item label="已提现金额">
						<label>45454</label>
					</el-form-item>
				</el-form>
			</el-col>
			<!--列表-->
			<el-table :data="users" stripe highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
				<el-table-column prop="name" label="玩家ID"  width="120">
				</el-table-column>
				<el-table-column prop="name" label="玩家昵称" width="120">
				</el-table-column>
				<el-table-column prop="name" label="手机号">
				</el-table-column>
				<el-table-column prop="name" label="QQ" >
				</el-table-column>
				<el-table-column prop="name" label="微信" >
				</el-table-column>
				<el-table-column prop="age" label="会员数量" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small">
							{{scope.row.age}}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="下级代理数量" width="150">
					<template slot-scope="scope">
						<el-button type="text" size="small">
							{{scope.row.age}}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="团队总收益" width="120">
				</el-table-column>
				<el-table-column prop="name" label="团队收益比例" width="150">
				</el-table-column>
				<el-table-column prop="name" label="自身剩余团队收益" width="150">
				</el-table-column>
				<el-table-column prop="name" label="三级分销获得收益" width="170">
				</el-table-column>
				<el-table-column prop="name" label="自身总收益" width="150">
				</el-table-column>
				<el-table-column prop="name" label="可提现额度" width="150">
				</el-table-column>
				<el-table-column prop="name" label="已提现金额" width="150">
				</el-table-column>
				<el-table-column prop="name" label="提现绑定信息" width="150">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="putInfo">
							提现绑定信息
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="300">
					<template slot-scope="scope">
						<el-button type="danger" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
						<el-button type="danger" size="small" @click="handleLogin(scope.$index, scope.row)">重置登录密码</el-button>
						<el-button type="danger" size="small" @click="handlePut(scope.$index, scope.row)">重置提现密码</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!--工具条-->
			<el-col :span="24" class="toolbar">
				<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="15" :total="total" style="float:right;">
				</el-pagination>
			</el-col>

			<el-dialog title="新增" v-model="addVisible" :close-on-click-modal="false">
				<el-form :model="editRoom" label-width="120px" :rules="editRoomRules" ref="editRoom">
					<el-form-item label="代理ID">
						<el-input v-model="filters.name" disabled></el-input>
					</el-form-item>
					<el-form-item label="代理昵称">
						<el-input v-model="filters.name" placeholder="代理昵称" disabled></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="filters.name" placeholder="手机号"></el-input>
					</el-form-item>
					<el-form-item label="QQ">
						<el-input v-model="filters.name" placeholder="手机号"></el-input>
					</el-form-item>
					<el-form-item label="微信">
						<el-input v-model="filters.name" placeholder="手机号"></el-input>
					</el-form-item>
					<el-form-item label="团队收益比例">
						<el-input v-model="filters.name" placeholder="手机号" type="number" min="0" max="40"></el-input>
						<span><=40%</span>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="editRoomVisible = false">取消</el-button>
					<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
				</div>
			</el-dialog>
			<el-dialog title="修改" v-model="editVisible" :close-on-click-modal="false">
				<el-form :model="govern" label-width="130px" :rules="governRules" ref="govern">
					<el-form-item label="代理ID">
						<el-input v-model="addForm.age"></el-input>
					</el-form-item>
					<el-form-item label="代理昵称">
						<el-input v-model="addForm.age"></el-input>
					</el-form-item>
					<el-form-item label="当前团队收益比例">
						<el-input-number v-model="addForm.age" min=0 max=40></el-input-number>
						<span><=40%</span>
					</el-form-item>
					<el-form-item label="新团队收益比例">
						<el-input-number v-model="addForm.age" min=0 max=40></el-input-number>
						<span><=40%</span>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="editVisible = false">取消</el-button>
					<el-button type="primary" @click.native="editSubmit" :loading="editLoading">确定</el-button>
				</div>
			</el-dialog>
			<el-dialog title="提现绑定信息" v-model="controlVisible" :close-on-click-modal="false">
				<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form  :model="filters">
						<el-form-item label="支付宝账号">
							<label>32152412312</label>
						</el-form-item>
						<el-form-item label="支付宝姓名">
							<label>32152412312</label>
						</el-form-item>
						<el-form-item label="银行卡号">
							<label>32152412312</label>
						</el-form-item>
						<el-form-item label="银行名称">
							<label>32152412312</label>
						</el-form-item>
						<el-form-item label="开户行">
							<label>32152412312</label>
						</el-form-item>
						<el-form-item label="持卡人姓名">
							<label>32152412312</label>
						</el-form-item>
					</el-form>
				</el-col>
			</el-dialog>
			<el-dialog title="重置登录密码" v-model="loginPwdVisible" :close-on-click-modal="false">
				<el-form :model="loginPwd" label-width="120px" :rules="loginPwdRules" ref="loginPwd">
					<el-form-item label="登录密码">
						<el-input v-model="filters.name" ></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="loginPwdVisible = false">取消</el-button>
					<el-button type="primary" @click.native="loginPwdSubmit" :loading="editLoading">提交</el-button>
				</div>
			</el-dialog>
			<el-dialog title="重置提现密码" v-model="tPwdVisible" :close-on-click-modal="false">
				<el-form :model="tPwd" label-width="120px" :rules="tPwdRules" ref="tPwd">
					<el-form-item label="提现密码">
						<el-input v-model="filters.name" ></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="tPwdVisible = false">取消</el-button>
					<el-button type="primary" @click.native="tPwdSubmit" :loading="editLoading">提交</el-button>
				</div>
			</el-dialog>
		</section>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	// import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

	export default {
		data() {
			return {
                addVisible:false,
                roomNameValue:'',
                editRoom:[],
                roomName:[],
                editVisible:false,
                govern:[],
                governValue:'',
                controlVisible:false,
                loginPwdVisible:false,
                tPwdVisible:false,
				filters: {
					name: ''
				},
				users: [],
                roomDefault: 'first',
                chartLine: null,
				total: 100,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
                editableTabs: [
                    {
                    title: 'Tab 1',
                    name: '1',
                    content: 'Tab 1 content'
                }
                ],
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					id: 0,
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//新增界面数据
				addForm: {
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},
                room: [
                    {
                    value: '1',
                    label: '游戏房间ID'
                }, {
                    value: '2',
                    label: '房间名称'
                }
                ],
                roomValue: '1',
                systemState: [
                    {
                        value: '1',
                        label: '系统吃分'
                    }, {
                        value: '2',
                        label: '系统吐分'
                    }
                ],
                systemValue: '1',
                bunko: [
                    {
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '输'
                    }, {
                        value: '2',
                        label: '赢'
                    }
                ],
                bunkoValue: '0'
			}
		},
		methods: {
            handlePut(){
                this.tPwdVisible = true;
			},
            putInfo(){
                this.controlVisible = true;
            },
            handleLogin(){
                this.loginPwdVisible = true;
            },
            bloodChange(){
                this.roomDefault = 'blood';
            },
            goAgent(){
                this.$router.push({path:'/agent'})
			},
            //性别显示转换
			formatSex: function (row, column) {
				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				let para = {
					page: this.page,
					name: this.filters.name
				};
				this.listLoading = true;
				//NProgress.start();
				getUserListPage(para).then((res) => {
					this.total = res.data.total;
					this.users = res.data.users;
					this.listLoading = false;
					//NProgress.done();
				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					removeUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面
			handleAdd: function () {
				this.addVisible = true;
				this.addForm = {
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				};
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.editForm);
							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
							editUser(para).then((res) => {
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getUsers();
							});
						});
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.addForm);
							para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
							addUser(para).then((res) => {
								this.addLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getUsers();
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					batchRemoveUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped lang="stylus">
	.agent-path
		display flex
		padding-bottom 10px
		&>p
			padding-right 10px
		&>h3
			cursor pointer
</style>